前述提及 Pass Through 的寫法及說明，並提供聲明式寫法可達到相同效果。

本篇說明 Pass Through 的其他相關功能：

全域設定

之前在 Unstyled Mode 提及使用 pt 設定全域樣式，在此以其他範例再次說明。

在 main.js 進行 pt 設定後，只要引入元件便會套用該 pt 的設定。另外文件上說明個別元件所設定的 pt 優先序會優先於全域設定的 pt。

// main.js
app.use(PrimeVue, {
  theme: {
    preset: Aura,
    options: {
      darkModeSelector: '.dark',
      cssLayer: {
        name: 'primevue',
        order: 'tailwind-base, primevue, tailwind-utilities'
      }
    }
  },
  pt: {
      button: { // 按鈕加上全域樣式
        root: {
          class:
            'p-2 rounded-xl'
        },
        label: {
          class: 'text-xl'
        }
      }
  }
})

如此設定後，在各頁面下引入 Button 元件時，即套用全域的樣式。

<template>
	<div class="mt-3">
        <Button label="Home" icon="pi pi-home" class="me-3"/>
        <Button label="Check" icon="pi pi-check" severity="info" />
    </div>
</template>

結合生命週期

Pass Through 結合 Vue 生命週期，採用 hooks 屬性，其值為物件，物件屬性則為 Vue 生命週期的 callback 函式：onBeforeUpdate、onUpdated、onBeforeMount、onMounted、onBeforeUnmount、 onUnmounted。

以下範例在 onMounted 及 onUnmounted 階段在 console 可看到印出來的文字：

<script setup>
import { ref } from 'vue';

const panelPt = ref({
    hooks: {
        onMounted: () => {
            //panel mounted
            console.log('onMounted!')
        },
        onUnmounted: () => {
            //panel unmounted
            console.log('onUnMounted!')
        }
    }
});
</script>

<template>
	<div class="mt-3">
        <Button label="Home" icon="pi pi-home" class="me-3" :pt="panelPt" />
        <Button label="Check" icon="pi pi-check" severity="info" />
    </div>
</template>

usePassThrough

PrimeVue 提供 usePassThrough 方法客製 pass through，包含三個參數的填寫：

1. 自定義物件(主題)
2. pt 的全域設定
3. 與樣式合併的設定

在 main.js 使用 usePassThrough：

// main.js
...
import PrimeVue from 'primevue/config';
import { usePassThrough } from "primevue/passthrough";
import BasePreset from "./basepreset";
...
const app = createApp(App)

const usePT = usePassThrough(
  BasePreset,
  {
      panel: {
          header: 'my_panel_header'
      }
  },
  { mergeSections: true, mergeProps: false }
);

app.use(PrimeVue, { unstyled: true, pt: CustomPreset });

在 mergeSections 及 mergeProps 的合併設定上，官方文件有提供詳細解說：

就我的理解

• mergeSectons 的樣式合併對象是針對元件內沒有 pt 設定的內層 DOM 元素
• mergeProps 的樣式合併對象是針對有 pt 設定的內層 DOM 元素。

預設上 mergeSectons 為 true；mergeProps 為 false。

1. { mergeSections: true, mergeProps: false }

   當 mergeProps 為 false 時，此時有設定的 panel.header 僅過套用 pt 設定的樣式：不與其他主題樣式合併。

   當 mergeSectons 為 true 時，其餘 panel 會套用到 tailwindCSS 樣式。

   panel.header.class => 'my_panel_header'
   panel.title.class => Tailwind.panel.title.class
   

2. { mergeSections: true, mergeProps: true }

   當 mergeProps 為 true 時，panel.header 除套用 pt 設定的樣式外，也會與 tailwindCSS 樣式合併。

   panel.header.class => [Tailwind.panel.header.class, 'my_panel_header']
   panel.title.class => Tailwind.panel.title.class
   

3. { mergeSections: false, mergeProps: true }

   當 mergeSectons 為 false 時，其餘 panel DOM 樣式皆以 pt 設定為主。

   panel.header.class => [Tailwind.panel.header.class, 'my_panel_header']
   panel.title.class => undefined
   

4. { mergeSections: false, mergeProps: false }

   兩者皆為 false 時，所有的 panel DOM 樣式皆以 pt 設定為主。

   panel.header.class => 'my_panel_header'
   panel.title.class => undefined
   

不過目前 usePassThrough 在實作上沒有使用過，僅依照文件的內容提出說明，應是針對 Unstyled Mode 下對樣式合併的設定。

參考連結：https://primevue.org/passthrough/